Introducing choroplethmapbox traces #3988

etpinard · 2019-06-26T22:52:33Z

Based off #3987

This PR adds a new mapbox-based trace type: choroplethmapbox 🎉 🗺️ 🛰️

Example: https://codepen.io/etpinard/pen/orGQNe

In brief, choroplethmapbox traces have a very similar API as their geo-subplot cousin choropleth. Both use locations and z to set the polygon-to-color mapping. But unlike choropleth, choroplethmapbox traces (currently) must be set with a geojson attribute that contains polygon coordinates.

Note that, this PR also fixes a choropleth bug in 91e0319 - where we didn't use the correct marker.line.color default.

Things that work

geojson can be set either as URL string or { } GeoJSON object. We accept GeoJSONs of type Feature and FeatureCollection and geometries of type Polygon and MultiPolygon.
colorscale / coloraxis work just like choropleth
hover and selections reuse the choropleth logic, where the polygons' centroid is used.
GeoJSON properties fields are accessible in hovertemplate (example)

Things worthy of discussion

The below default. below (like in mapbox.layers) sets the id of the layer just below where the choroplethmapbox trace will be plotted. I tentatively chose the layer just above the last "water" layer. That is, choroplethmapbox traces are plotted below roads and labels by default.
Maybe instead of some "smart" default for below, we could plot choroplethmapbox traces above all background layers (but below scattermapbox traces) and have a default marker.opacity of e.g. 0.7?

Things that we could add

topojson support, that way users could (easily) use https://cdn.plot.ly/world_110m.json and friends
locationmode. The current behavior would correspond to locationmode: 'geojson-id'. Some users might expect to identify GeoJSON features using their properties.name (this would correspond to e.g. locationmode: 'geojson-prop-name'. Moreover, we could also support the locationmode values found in geo traces: 'ISO-3', 'USA-states', 'country names'
some zkey attribute as an alternative to the z array. For example, zkey: 'value' would read off the properties.value values in the GeoJSON set by geojson

cc @plotly/plotly_js @nicolaskruchten @chriddyp

- valid choropleth datum must have a valid location AND `z` value - set calcdata[i][j].index during calc so that choroplethmapbox can use it in its convert.js

... and update choropleth baselines that didn't show the "correct" default "black"

for geo AND mapbox base plot modules ... that way we do this only once when geo and mapbox modules are registered

- reusing choropleth calc, hover, select, eventData and feature2polygon - use `PlotlyGeoAssets` to stash fetched geojson url data - use two layers, one fill (to filled choropleth polygon), one line to draw `marker.line` styles - add mockAxis on mapbox subplot instances, used to format choroplethmapbox 'z' on hover

... similar to how we do things on geo subplots

- use _rehover wrapper similar to cartesian subplots and call it on moveend - split fx init code into prototype.initFx

- where by default chroroplethmapbox traces are placed above the top most "water" layer - N.B. we need to remove/add again layers when *below* is updated

lib/index-mapbox.js

src/traces/choropleth/calc.js

src/traces/choroplethmapbox/convert.js

src/traces/choroplethmapbox/defaults.js

src/traces/choroplethmapbox/plot.js

src/plots/mapbox/mapbox.js

archmoj · 2019-06-27T11:42:51Z

src/traces/choroplethmapbox/index.js

+    moduleType: 'trace',
+    name: 'choroplethmapbox',
+    basePlotModule: require('../../plots/mapbox'),
+    categories: ['mapbox', 'gl', 'noOpacity'],


Later on the road, it may be of interest to have traces with opacity. Right?

opacity here for choroplethmapbox traces would be equivalent to marker.opacity, so we don't need it.

What about dimming marker.lines? Trace opacity may be handy for adjusting both.

Maybe, but I'm not going to do this now for consistency with choropleth:

plotly.js/src/traces/choropleth/index.js

Line 26 in cb202a8

categories: ['geo', 'noOpacity'],

- move isNonBlankString in outer scope - add "" around URL in invalid-url error msg

... when marker.line.width===0

@gl

... and set for npm run test-jasmine "$s" --tags=gl --skip-tags=noCI so that suites (e.g. choroplethmapbox_test.js) where all @gl tests are also @noci do not fail.

src/traces/choropleth/attributes.js

Introducing densitymapbox traces

etpinard · 2019-07-02T13:43:27Z

Is everyone subscribed to this PR ok with the behavior?

etpinard · 2019-07-03T14:00:55Z

No news, good news I guess. Merging this PR into #3987 to have all 1.49.0 mapbox items in one place

etpinard added 14 commits June 26, 2019 16:18

improve Choropleth.calc

43c568f

- valid choropleth datum must have a valid location AND `z` value - set calcdata[i][j].index during calc so that choroplethmapbox can use it in its convert.js

add dflt to choropleth marker.line.color

91e0319

... and update choropleth baselines that didn't show the "correct" default "black"

add choroplethmapbox attributes

8fc1dbe

add PlotlyGeoAssets to window during Plotly.register

70878b7

for geo AND mapbox base plot modules ... that way we do this only once when geo and mapbox modules are registered

fetch GeoJSON URLs found in calcdata before updateData()

012a749

sort all choroplethmapbox traces below scattermapbox traces

f7f3190

... similar to how we do things on geo subplots

add GeoJSON feature 'properties' to eventData

4e88075

improve mapbox hover after drag

a166761

- use _rehover wrapper similar to cartesian subplots and call it on moveend - split fx init code into prototype.initFx

first cut choroplethmapbox tests

9a602ba

allow numbers as *locations* items when using custom *geojson*

a457722

fixup choroplethmapbox hover content post-#3968

1359307

implement *below* in choroplethmapbox traces

4d7e0aa

- where by default chroroplethmapbox traces are placed above the top most "water" layer - N.B. we need to remove/add again layers when *below* is updated

add 3️⃣ choroplethmapbox mocks

cb202a8

etpinard added bug something broken status: reviewable labels Jun 26, 2019

etpinard added this to the v1.49.0 milestone Jun 26, 2019

archmoj reviewed Jun 27, 2019

View reviewed changes

etpinard added 5 commits June 27, 2019 10:05

mojtaba-proof a few things

e509047

- move isNonBlankString in outer scope - add "" around URL in invalid-url error msg

fixup choroplethmapbox "below" test

7dd04e7

do not coerce choropleth* marker.line.color

654c08e

... when marker.line.width===0

add missing @gl tag to mapbox tests

22c2a1e

add doNotFailOnEmptyTestSuite CLI option

fe6782d

... and set for npm run test-jasmine "$s" --tags=gl --skip-tags=noCI so that suites (e.g. choroplethmapbox_test.js) where all @gl tests are also @noci do not fail.

antoinerg reviewed Jun 28, 2019

View reviewed changes

src/traces/choropleth/attributes.js Show resolved Hide resolved

etpinard added 4 commits June 28, 2019 11:23

add densitymapbox attributes

7e15d81

implement densitymapbox

91a9bc4

add densitymapbox jasmine tests

4f42d1b

add 3️⃣ densitymapbox mocks

4299857

etpinard mentioned this pull request Jun 28, 2019

Introducing densitymapbox traces #3993

Merged

etpinard added 2 commits June 28, 2019 15:46

remove layers from last to first

1add90e

Merge pull request #3993 from plotly/densitymapbox-pr

ca48461

Introducing densitymapbox traces

Merge branch 'mapbox-v1' into choroplethmapbox-pr

6d7929c

etpinard merged commit eb04b4c into mapbox-v1 Jul 3, 2019

etpinard deleted the choroplethmapbox-pr branch July 3, 2019 14:01

etpinard mentioned this pull request Jul 3, 2019

Feature Request: Add plotly event listeners to Mapbox layers #1966

Closed

Mahdis-z mentioned this pull request Jul 31, 2019

1.49 Mapbox features plotly/documentation#1412

Closed

cpsievert mentioned this pull request Aug 29, 2019

Add new choroplethmapbox locationmode for geojson properties.id #4154

Closed

huonw mentioned this pull request Aug 5, 2020

Support Choropleth's locationmode in Choroplethmapbox #5048

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Introducing choroplethmapbox traces #3988

Introducing choroplethmapbox traces #3988

Uh oh!

etpinard commented Jun 26, 2019 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

archmoj Jun 27, 2019

Uh oh!

etpinard Jun 27, 2019 •

edited

Loading

Uh oh!

archmoj Jun 27, 2019

Uh oh!

etpinard Jun 27, 2019

Uh oh!

Uh oh!

etpinard commented Jul 2, 2019 •

edited

Loading

Uh oh!

etpinard commented Jul 3, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Introducing choroplethmapbox traces #3988

Introducing choroplethmapbox traces #3988

Uh oh!

Conversation

etpinard commented Jun 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Things that work

Things worthy of discussion

Things that we could add

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

archmoj Jun 27, 2019

Choose a reason for hiding this comment

Uh oh!

etpinard Jun 27, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

archmoj Jun 27, 2019

Choose a reason for hiding this comment

Uh oh!

etpinard Jun 27, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

etpinard commented Jul 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etpinard commented Jul 3, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

etpinard commented Jun 26, 2019 •

edited

Loading

etpinard Jun 27, 2019 •

edited

Loading

etpinard commented Jul 2, 2019 •

edited

Loading